<template>
  <div class="api-docs">
    <header class="header">
      <h1>ADX API 文档</h1>
      <p class="subtitle">API接口文档</p>
    </header>

    <main class="main-content">
      <!-- 接口概览 -->
      <section class="section">
        <h2>接口概览</h2>
        <div class="overview-card">
          <h3>广告报价接口</h3>
          <div class="endpoint-info">
            <span class="method post">POST</span>
            <span class="endpoint">/qx/adx/v1/bid</span>
          </div>
          <p>获取广告报价信息，支持多种广告类型和设备参数</p>
        </div>
      </section>

      <!-- 更新记录 -->
      <section class="section">
        <h2>更新记录</h2>
        <div class="overview-card">
          <div class="fields-table">
            <table>
              <thead>
                <tr>
                  <th>更新时间</th>
                  <th>更新内容</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="field-name">20251114</td>
                  <td class="field-desc">增加宏定义</td>
                </tr>
                <tr>
                  <td class="field-name">20251106</td>
                  <td class="field-desc">新增ipv6字段，客户端IPV6地址</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>
      
      <section class="section">
        <h2>媒体接入方式</h2>
        <div class="overview-card">
          <ol>
            <li>媒体提供媒体相关信息（名称，包名，版本）</li>
            <li>媒体获取proto文件，进行代码接入</li>
            <li>我司提供对应测试地址，测试广告位ID等配置，开发者自测。</li>
            <li>双方联调小量测试，GAP合理后，进行全量接入。</li>
          </ol>
        </div>
      </section>

      <!-- 应用层协议 -->
      <section class="section">
        <h2>应用层协议</h2>
        <div class="overview-card">
          <div class="fields-table">
            <table>
              <thead>
                <tr>
                  <th>参数</th>
                  <th>值</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="field-name">应用层协议</td>
                  <td>http协议</td>
                  <td class="field-desc">备注</td>
                </tr>
                <tr>
                  <td class="field-name">method</td>
                  <td>post</td>
                  <td class="field-desc">-</td>
                </tr>
                <tr>
                  <td class="field-name">Content-Type</td>
                  <td>application/x-protobuf</td>
                  <td class="field-desc">-</td>
                </tr>
                <tr>
                  <td class="field-name">编码方式</td>
                  <td>utf-8</td>
                  <td class="field-desc">utf-8</td>
                </tr>
                <tr>
                  <td class="field-name">api格式</td>
                  <td>proto3</td>
                  <td class="field-desc">proto文件</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- 请求消息体 -->
      <section class="section">
        <h2>请求消息体</h2>
        <div class="message-container">
          <div v-for="message in requestMessages" :key="message.name" class="message-card">
            <div class="message-header">
              <h3>{{ message.name }}</h3>
              <p class="message-desc">{{ message.description }}</p>
            </div>
            <div class="fields-table">
              <table>
                <thead>
                  <tr>
                    <th>字段名</th>
                    <th>类型</th>
                    <th>编号</th>
                    <th>必填</th>
                    <th>描述</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="field in message.fields" :key="field.name">
                    <td class="field-name">
                      <span :class="{ repeated: field.repeated }">{{ field.name }}</span>
                      <span v-if="field.repeated" class="badge repeated">[]</span>
                    </td>
                    <td class="field-type">{{ field.type }}</td>
                    <td class="field-number">{{ field.number }}</td>
                    <td class="field-required">
                      <span :class="['badge', field.required ? 'required' : 'optional']">
                        {{ field.required ? '必填' : '选填' }}
                      </span>
                    </td>
                    <td class="field-desc">{{ field.description }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <!-- 响应消息体 -->
      <section class="section">
        <h2>响应消息体</h2>
        <div class="message-container">
          <div v-for="message in responseMessages" :key="message.name" class="message-card">
            <div class="message-header">
              <h3>{{ message.name }}</h3>
              <p class="message-desc">{{ message.description }}</p>
            </div>
            <div class="fields-table">
              <table>
                <thead>
                  <tr>
                    <th>字段名</th>
                    <th>类型</th>
                    <th>编号</th>
                    <th>必填</th>
                    <th>描述</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="field in message.fields" :key="field.name">
                    <td class="field-name">
                      <span :class="{ repeated: field.repeated }">{{ field.name }}</span>
                      <span v-if="field.repeated" class="badge repeated">[]</span>
                    </td>
                    <td class="field-type">{{ field.type }}</td>
                    <td class="field-number">{{ field.number }}</td>
                    <td class="field-required">
                      <span :class="['badge', field.required ? 'required' : 'optional']">
                        {{ field.required ? '必填' : '选填' }}
                      </span>
                    </td>
                    <td class="field-desc">{{ field.description }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <!-- 枚举定义 -->
      <section class="section">
        <h2>枚举定义</h2>
        <div class="enum-container">
          <div v-for="enumItem in protoEnums" :key="enumItem.name" class="enum-card">
            <div class="enum-header">
              <h3>{{ enumItem.name }}</h3>
              <span class="enum-type">枚举类型</span>
            </div>
            <div class="enum-values">
              <table>
                <thead>
                  <tr>
                    <th>枚举名称</th>
                    <th>枚举值</th>
                    <th>描述</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="value in enumItem.values" :key="value.name">
                    <td class="enum-name">{{ value.name }}</td>
                    <td class="enum-value">{{ value.value }}</td>
                    <td class="enum-desc">{{ value.description }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <!-- 宏定义 -->
      <section class="section">
        <h2>宏定义</h2>
        <div class="description">
          <p>如果上报链接中包含如下宏替换名称，需要进行宏替换后再进行上报。如果不存在则无需替换宏。</p>
        </div>
        <div class="overview-card">
          <div class="fields-table">
            <table>
              <thead>
                <tr>
                  <th>宏参数名称</th>
                  <th>类型</th>
                  <th>出现位置</th>
                  <th>备注</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="field-name">__DOWN_X__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时屏幕左上角为原点的横坐标，坐标获取方式见下方示意</td>
                </tr>
                <tr>
                  <td class="field-name">__DOWN_Y__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时屏幕左上角为原点的纵坐标，坐标获取方式见下方示意</td>
                </tr>
                <tr>
                  <td class="field-name">__UP_X__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时屏幕左上角为原点的横坐标，坐标获取方式见下发示意</td>
                </tr>
                <tr>
                  <td class="field-name">__UP_Y__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时屏幕左上角为原点的纵坐标，坐标获取方式见下发示意</td>
                </tr>
                <tr>
                  <td class="field-name">__WIDTH__</td>
                  <td>int32</td>
                  <td>imp,click</td>
                  <td>实际广告位的宽,单位为像素</td>
                </tr>
                <tr>
                  <td class="field-name">__HEIGHT__</td>
                  <td>int32</td>
                  <td>imp,click</td>
                  <td>实际广告位的高,单位为像素</td>
                </tr>
                <tr>
                  <td class="field-name">__EVENT_TIME_START__</td>
                  <td>int64</td>
                  <td>click</td>
                  <td>当前时间戳（毫秒）</td>
                </tr>
                <tr>
                  <td class="field-name">__EVENT_TIME_END__</td>
                  <td>int64</td>
                  <td>click</td>
                  <td>点击结束时间（毫秒）</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_DOWN_X__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时广告位左上角为原点的横坐标，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_DOWN_Y__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时广告位左上角为原点的纵坐标，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_UP_X__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时广告位左上角为原点的横坐标，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_UP_Y__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时广告位左上角为原点的纵坐标，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__TS__</td>
                  <td>int</td>
                  <td>all</td>
                  <td>事件发生的时间戳-毫秒</td>
                </tr>
                <tr>
                  <td class="field-name">__DP_WIDTH__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>实际广告宽(逻辑像素)</td>
                </tr>
                <tr>
                  <td class="field-name">__DP_HEIGHT__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>实际广告高(逻辑像素)</td>
                </tr>
                <tr>
                  <td class="field-name">__DOWN_X_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时的横坐标屏幕左上角为原点以DP为单位，仅Android</td>
                </tr>
                <tr>
                  <td class="field-name">__DOWN_Y_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时的纵坐标屏幕左上角为原点以DP为单位，仅Android</td>
                </tr>
                <tr>
                  <td class="field-name">__UP_X_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时的横坐标，屏幕左上角为原点以DP为单位，仅Android</td>
                </tr>
                <tr>
                  <td class="field-name">__UP_Y_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时的纵坐标，屏幕左上角为原点以DP为单位，仅Android</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_DOWN_X_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时的横坐标广告位左上角为原点以DP为单位，仅Android，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_DOWN_Y_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指按下时的纵坐标广告位左上角为原点以DP为单位，仅Android，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_UP_X_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时的横坐标，广告位左上角为原点以DP为单位，仅Android，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_UP_Y_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开设备屏幕时的纵坐标，广告位左上角为原点以DP为单位，仅Android，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__POS_UP_XY_DP__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>用户手指离开时的像素坐标（XY），需替换为：X_Y广告位左上角为原点以DP为单位，仅Android，建议替换，影响广告填充。</td>
                </tr>
                <tr>
                  <td class="field-name">__CLICKAREA__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>点击区域：1-广告素材； 2-按钮</td>
                </tr>
                <tr>
                  <td class="field-name">__SLD__</td>
                  <td>int32</td>
                  <td>click</td>
                  <td>点击触发方式：0-点击触发 2-摇一摇 5-扭一扭  必须替换。</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <!-- 请求示例 -->
      <section class="section">
        <h2>请求示例</h2>
        <div class="example-container">
          <div class="example-tabs">
            <button 
              v-for="(example, key) in requestExamples" 
              :key="key"
              @click="activeRequestExample = key"
              :class="['tab-button', { active: activeRequestExample === key }]"
            >
              {{ example.title }}
            </button>
          </div>
          <div class="example-content">
            <div class="code-block">
              <pre><code>{{ requestExamples[activeRequestExample].content }}</code></pre>
            </div>
          </div>
        </div>
      </section>

      <!-- 响应示例 -->
      <section class="section">
        <h2>响应示例</h2>
        <div class="example-container">
          <div class="example-tabs">
            <button 
              v-for="(example, key) in responseExamples" 
              :key="key"
              @click="activeResponseExample = key"
              :class="['tab-button', { active: activeResponseExample === key }]"
            >
              {{ example.title }}
            </button>
          </div>
          <div class="example-content">
            <div class="code-block">
              <pre><code>{{ responseExamples[activeResponseExample].content }}</code></pre>
            </div>
          </div>
        </div>
      </section>

      
      <!-- 附录 -->
      <section class="section">
        <h2>附录</h2>
        <div class="overview-card">
          <h3>Proto文件下载</h3>
          <p>点击下面的链接下载协议文件：</p>
          <div class="download-links">
            <a :href="`http://sspfile.qingxuntech.cn/file/Qinxun_V2.1.proto?t=${Date.now()}`" download="Qinxun_V2.1.proto" class="download-link">
              <span class="file-icon">📄</span>
              Qinxun_V2.1.proto
            </a>
          </div>
        </div>
      </section>
      <!-- 测试广告位 -->
      <section class="section">
        <h2>测试广告位</h2>
        <div class="overview-card">
          <div class="fields-table">
            <table>
              <thead>
                <tr>
                  <th>广告位类型</th>
                  <th>ID</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td class="field-name">媒体ID</td>
                  <td>R73EUPH69S</td>
                </tr>
                <tr>
                  <td class="field-name">信息流ID</td>
                  <td>QS1VB6WNNT</td>
                </tr>
                <tr>
                  <td class="field-name">开屏ID</td>
                  <td>3AXC8N9AE1</td>
                </tr>
                <tr>
                  <td class="field-name">激励视频ID</td>
                  <td>HXEK7QZJAG</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>
       
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { requestMessages, responseMessages, protoEnums } from './types/proto'

const activeRequestExample = ref<'basic' | 'minimal'>('basic')
const activeResponseExample = ref<'success' | 'no_ads' | 'error'>('success')

const requestExamples = {
  basic: {
    title: '基础请求',
    content: `{
  "aid": "ad_position_123",
  "width": 1080,
  "height": 1920,
  "bid": {
    "bidType": "CPM",
    "bidFloor": 100
  },
  "media": {
    "appId": "app_123456",
    "appName": "测试应用",
    "appPackageId": "com.example.app",
    "appVersion": "1.0.0",
    "wechatMini": 1
  },
  "device": {
    "deviceType": "Phone",
    "os": "Android",
    "osVersion": "12.0",
    "screenWidth": 1080,
    "screenHeight": 1920,
    "orientation": "Portrait",
    "ua": "Mozilla/5.0 (Android 12; Mobile; rv:68.0) Gecko/68.0 Firefox/88.0",
    "ip": "192.168.1.1",
    "brand": "Xiaomi",
    "model": "MI 11"
  },
  "network": {
    "type": "4",
    "carrier": "1"
  },
  "geo": {
    "lat": "39.9042",
    "lng": "116.4074"
  }
}`
  },
  minimal: {
    title: '最小化请求',
    content: `{
  "aid": "ad_position_456",
  "width": 720,
  "height": 1280,
  "media": {
    "appId": "app_minimal",
    "appName": "极简应用",
    "appPackageId": "com.minimal.app",
    "appVersion": "1.0.0"
  },
  "device": {
    "deviceType": "Phone",
    "os": "Android",
    "screenWidth": 720,
    "screenHeight": 1280,
    "orientation": "Portrait",
    "ua": "Dalvik/2.1.0 (Linux; U; Android 11; SM-G991B Build/RP1A.200720.012)",
    "ip": "10.0.0.1"
  },
  "network": {
    "type": "1",
    "carrier": "0"
  }
}`
  }
}

const responseExamples = {
  success: {
    title: '成功响应',
    content: `{
  "code": "200",
  "message": "success",
  "posList": [
    {
      "creativeId": "creative_12345",
      "impUrl": [
        "https://tracking.example.com/imp/12345"
      ],
      "clickUrl": "https://landing.example.com/ad/12345",
      "clickTrackingUrlList": [
        "https://tracking.example.com/click/12345"
      ],
      "openType": "0",
      "platform": "2",
      "adIconUrl": "https://cdn.example.com/icon.png",
      "adLogoUrl": "https://cdn.example.com/logo.png",
      "combineType": "1",
      "imgUrl": [
        "https://cdn.example.com/ad1.jpg"
      ],
      "iconUrl": [
        "https://cdn.example.com/icon1.png"
      ],
      "imageWidth": "480",
      "imageHeight": "320",
      "title": "优质广告标题",
      "subTitle": "吸引人的副标题",
      "desc": [
        "这是一个很棒的广告描述"
      ],
      "bidPrice": 150
    }
  ]
}`
  },
  no_ads: {
    title: '无广告响应',
    content: `{
  "code": "204",
  "message": "no ads available",
  "posList": []
}`
  },
  error: {
    title: '错误响应',
    content: `{
  "code": "400",
  "message": "Invalid request parameters",
  "posList": []
}`
  }
}
</script>

<style scoped>
.api-docs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px;
}

.header h1 {
  margin: 0;
  font-size: 2.5rem;
  font-weight: 700;
}

.subtitle {
  margin: 10px 0 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

.section {
  margin-bottom: 40px;
}

.section h2 {
  color: #2d3748;
  font-size: 1.8rem;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e2e8f0;
}

.overview-card {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.overview-card h3 {
  margin: 0 0 12px;
  color: #2d3748;
}

.endpoint-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.method {
  padding: 4px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
}

.method.post {
  background: #48bb78;
  color: white;
}

.endpoint {
  font-family: 'Courier New', monospace;
  font-weight: 600;
  color: #4a5568;
}

.message-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.message-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.message-header {
  background: #f7fafc;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.message-header h3 {
  margin: 0 0 8px;
  color: #2d3748;
  font-size: 1.3rem;
}

.message-desc {
  margin: 0;
  color: #718096;
  font-size: 0.95rem;
}

.fields-table {
  padding: 20px;
  overflow-x: auto;
}

.fields-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fields-table th {
  background: #f8f9fa;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #4a5568;
  border-bottom: 2px solid #e2e8f0;
}

.fields-table td {
  padding: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.field-name {
  font-weight: 600;
  color: #2d3748;
  font-family: 'Courier New', monospace;
}

.field-type {
  color: #805ad5;
  font-family: 'Courier New', monospace;
}

.field-number {
  color: #718096;
  text-align: center;
}

.field-desc {
  color: #4a5568;
  line-height: 1.4;
}

.download-links {
  margin-top: 16px;
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #667eea;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.download-link:hover {
  background: #5a67d8;
}

.file-icon {
  font-size: 1.2rem;
}

.badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

.badge.required {
  background: #fed7d7;
  color: #c53030;
}

.badge.optional {
  background: #e6fffa;
  color: #234e52;
}

.badge.repeated {
  background: #fef5e7;
  color: #d69e2e;
}

.enum-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 24px;
}

.enum-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.enum-header {
  background: #f7fafc;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.enum-header h3 {
  margin: 0;
  color: #2d3748;
  font-size: 1.2rem;
}

.enum-values {
  padding: 20px;
}

.enum-values table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.enum-values th {
  background: #f8f9fa;
  padding: 10px;
  text-align: left;
  font-weight: 600;
  color: #4a5568;
  border-bottom: 2px solid #e2e8f0;
}

.enum-values td {
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.enum-name {
  font-weight: 600;
  color: #2d3748;
  font-family: 'Courier New', monospace;
}

.enum-value {
  color: #d69e2e;
  font-weight: 600;
  text-align: center;
}

.enum-desc {
  color: #4a5568;
}

.example-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.example-tabs {
  display: flex;
  background: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
}

.tab-button {
  padding: 12px 24px;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 500;
  color: #718096;
  transition: all 0.2s;
}

.tab-button:hover {
  background: #edf2f7;
  color: #4a5568;
}

.tab-button.active {
  background: white;
  color: #2d3748;
  border-bottom: 2px solid #667eea;
}

.example-content {
  padding: 20px;
}

.code-block {
  background: #2d3748;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
}

.code-block pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}

.code-block code {
  color: #e2e8f0;
}

@media (max-width: 768px) {
  .api-docs {
    padding: 10px;
  }
  
  .header h1 {
    font-size: 2rem;
  }
  
  .enum-container {
    grid-template-columns: 1fr;
  }
  
  .fields-table {
    padding: 10px;
  }
  
  .fields-table table {
    font-size: 0.8rem;
  }
  
  .fields-table th,
  .fields-table td {
    padding: 8px 6px;
  }
}
</style>